<template>
    <div class="dark_theme">
        <VanNavBar v-show="isSticky" title="穿搭推荐" :style="{ backgroundColor: '#181818', color: '#fefefe' }" :fixed="true">
        </VanNavBar>
        <!--顶部推荐海报-->
        <VanImage :src="currentBanner" lazy-load />
        <!--吸顶布局-->
        <VanSticky @change="stickyChange" offset-top="30px">
            <!--穿搭推荐-->
            <VanTabs @change="TabChange" v-model:active="activeTab" animated background="#181818"
                title-active-color="#fefefe" color="#181818">
                <VanTab v-for="item in tabList" v-bind:key="item.tag" :title="item.tag" />
            </VanTabs>
        </VanSticky>
    </div>
    <div class="share-container" @scroll="pageScroll" ref="detailInfo">
        <div class="sigle-box" v-for="(shareItem) in shareList" v-bind:key="shareItem.id">
            <div class="swiper-box">
                <VanSwipe>
                    <VanSwipeItem v-for="(item) in JSON.parse(shareItem.swiperList)" v-bind:key="item.url">
                        <VanImage :src="item.url" lazy-load/>
                    </VanSwipeItem>
                    <template #indicator="{ active, total }">
                        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                    </template>
                </VanSwipe>
            </div>
            <div class="text-description">
                <div class="text-label">{{ shareItem.title ? shareItem.title : "" }}</div>
                <div class="text-detail">{{ shareItem.detail ? shareItem.detail : "" }}</div>
            </div>
            <div class="shop-recommand" v-if="shareItem.goods && shareItem.goods.length">
                <div class="shop-box" v-for="item in JSON.parse(shareItem.goods)" v-bind:key="item.id"
                    @click="navToDetail(item.id)">
                    <div class="goods-img">
                        <VanImage fit="contain" width="100%" height="100%" :src="item.url" lazy-load src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"></VanImage>
                    </div>
                    <div class="shop-btn text-ellipsis">{{ item.tag }}</div>
                </div>
            </div>
        </div>
    </div>
    <!--回顶部操作-->
    <van-back-top class="topbar-custom" right="25" bottom="100" @click="scrollToTop">
        <van-icon class-prefix="iconfont" size="32px" name="topbar"></van-icon>
    </van-back-top>
</template>
<script setup>
import { showLoadingToast, showToast } from 'vant';
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import _service from "../request/axios";
let isSticky = ref(false);
let isTotal = ref(false);
let currentBanner = ref("");//当前的标签页
let shareList = ref([]);
let tabList = ref([]);
let currentPage = ref(1);//从1开始
let currentTabId = ref(0);
let activeTab = ref(0);
let limit = ref(3);//分页的数量
let detailInfo = ref();//用于获取dom对象
const router = useRouter();

function initPage() {
    _service.get("/match/tag").then(res => {
        tabList.value = res.data;
        currentBanner.value = tabList.value[0].banner;
        currentTabId.value = tabList.value[0].id;
        //检查缓存或者重新请求
        readStorge(currentTabId.value) || getMatchList(currentTabId.value, currentPage.value, limit.value);
    })
}
function stickyChange() {
    isSticky.value = !isSticky.value;
}
function writeStorage() {
    //这里有风险
    localStorage.setItem(currentTabId.value + 'match', JSON.stringify({
        limit: limit.value,
        currentPage: currentPage.value,
        shareList: shareList.value,
        isTotal: isTotal.value
    }));
}
function readStorge(key) {
    let tmpData = JSON.parse(localStorage.getItem(key + 'match'));
    if (tmpData) {
        limit.value = tmpData.limit;
        currentPage.value = tmpData.currentPage;
        shareList.value = tmpData.shareList;
        return true;
    } else {
        return false;
    }
}
function TabChange(index) {
    //写入localStorage缓存
    writeStorage();
    //进行tabbar的切换,初始化部分数据
    activeTab.value = index;
    currentBanner.value = tabList.value[index].banner;
    currentTabId.value = tabList.value[index].id;
    shareList.value = [];
    currentPage.value = 1;
    isTotal.value = false;
    readStorge(currentTabId.value) || getMatchList(currentTabId.value, currentPage.value, limit.value);
}
function getMatchList(id, page, limit) {
    //根据参数分页查询
    const params = {
        params: {
            id, page, limit
        }
    };
    let matchRecomIndex = localStorage.getItem("matchRecomIndex");
    if (matchRecomIndex) {
        params.params.matchRecomIndex = matchRecomIndex;
    }
    _service.get("/match/list", params).then(res => {
        if (!shareList.value.length) {
            shareList.value = res.data.list;
        } else {
            shareList.value = shareList.value.concat(res.data.list);
        }
        matchRecomIndex = res.data.matchRecomIndex;//写入缓存
        if (matchRecomIndex) {
            localStorage.setItem("matchRecomIndex", matchRecomIndex);
        }
        isTotal.value = res.data.isTotal;
    })
}
function pageScroll(e) {
    if (e.target.scrollTop + e.target.clientHeight + 20 > e.target.scrollHeight) {
        //重新发送请求，获取新一批文章
        currentPage.value++;
        if (!isTotal.value) {
            showLoadingToast({
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner',
            });
            getMatchList(currentTabId.value, currentPage.value, limit.value);
        } else {
            showToast({
                message: '再怎么找也没有啦~',
                wordBreak: 'break-word'
            });
        }
    }
}
function scrollToTop() {
    // 获取页面的实例对象
    detailInfo.value.scrollTop = 0
}
function navToDetail(cloth_id) {
    router.push({
        path: '/detail/goods',
        query: {
            id: cloth_id
        }
    })
}
onMounted(() => {
    initPage();
})
</script>
<style lang="less">
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: #0000001a;
}

.dark_theme {
    background-color: #181818;
    padding-bottom: 10px;

    .van-tabs__line {
        background-color: #f4f4f4 !important;
    }

    .van-nav-bar__title {
        color: #f4f4f4;
    }
}

.van-cell__title {
    font-weight: bold;
}

.sigle-box {
    margin-bottom: 10px;
    background-color: #fefefe;
    border-radius: 10px;

    .swiper-box {
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .text-description {
        padding: 10px;
        text-align: left;
        box-sizing: border-box;

    }

    .text-label {
        font-weight: bold;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .text-detail {
        font-size: 14px;
        color: #585858;
        letter-spacing: 2px;
    }

    .shop-box {
        width: 35%;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .shop-recommand {
        display: flex;
        padding: 10px;
        .goods-img{
            width:100%;
            height: 100%;
        }
    }

    .shop-btn {
        width: 90%;
        margin-top: 4px;
        padding: 0px 4px;
        box-sizing: border-box;
        background-color: #181818;
        color: #f4f4f4;
        border-radius: 20px;
        font-size: 12px;
        text-align: center;
        line-height: 26px;
        height: 26px;
    }
}

.share-container {
    background-color: #181818;
    padding: 0px 10px;
    padding-bottom: 60px;
    height: calc(100vh - 90px);
    overflow: scroll;
}

.share-container::-webkit-scrollbar {
    display: none;
    /*Safari and Chrome*/
}
</style>